<template>
    <div >
        <q-dialog  v-model="diag" >
            <div>
                <StockItemEdocForm @submit="initData()" style="width:400px;" @close="diag=false" :stock_code="props.stockCode" ></StockItemEdocForm>
            </div>
        </q-dialog>
        <q-dialog  v-model="editDiag" >
            <div>
                <StockItemEdocForm @submit="initData()" mode="edit" style="width:400px;" @close="editDiag=false" :id="id"></StockItemEdocForm>
            </div>
        </q-dialog>
        <div class="row justify-end q-mb-md">
            <q-btn class="" color="primary" icon="add" label="Create" @click="diag=true" v-if="props.editable"/>
        </div>
        <q-table class="card-radius my-table" wrap-cells :rows="sEdocs" :columns="cols" :rows-per-page-options="[5]" >
            <template v-slot:body-cell-action="props">
                <q-td>
                    <div class="row justify-start">
                        <q-btn class="q-px-sm" color="primary" flat icon="edit"  @click="editFn(props.row.id)" />
                        <q-btn class="q-px-sm" color="negative" flat icon="delete"  @click="deleteFn(props.row.id)" />
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-doc_name="props">
                <q-td>
                    <div class="row justify-start items-center">
                        <template v-if="props.row.file">
                            <q-icon name="attach_file" /><a :href="djangoUrl+props.row.file" target="_blank">{{props.row.doc_name}}</a>
                        </template>
                        <template v-else>
                            {{props.row.doc_name}}
                        </template>
                    </div>
                </q-td>
            </template>
        </q-table>
    </div>
</template>

<script setup lang="ts">
import { deleteStockItemEdocs, getStockItemEdocs } from 'src/services/edocService';
import { StockItemEDoc } from 'src/services/type';
import { onMounted, ref } from 'vue';
import StockItemEdocForm from './StockItemEDocForm.vue';
import { useQuasar } from 'quasar';
import { resolveDjangoUrl } from 'src/boot/axios';

const props = withDefaults(defineProps<{
    id: number
}>(),{
    id:0
});

const djangoUrl = resolveDjangoUrl()
const $q = useQuasar()

const diag = ref(false)
const editDiag = ref(false)
const sEdocs = ref<StockItemEDoc[]>([]);
const align = 'left'
const cols = [
    {
        name:'stock_code',
        label:'Stock Code',
        field:'stock_code',
        sortable: true,
        align
    },
    {
        name:'doc_name',
        label:'Doc Name',
        field:'doc_name',
        sortable: true,
        align
    },
    {
        name:'version',
        label:'Version',
        field:'version',
        sortable: true,
        align
    },
    
]


async function initData() {
    sEdocs.value = await getStockItemEdocsHistory(id)
}

function editFn(sie_id:number){
    id.value = sie_id
    editDiag.value = true
}
function deleteFn(id:number){
    $q.dialog({
        title: 'Confirm',
        message: 'Are you sure to delete this record?',
        cancel: true,
        : true
    }).onOk(async () => {
        const res = await deleteStockItemEdocs(id)
        if (res){
            initData()
        }
    })

}
onMounted(() => {
    initData()
})

</script>